<template>
  <div class="table-pagination">
    <el-table border :height="height" class="v-table" stripe :data="data" @selection-change="selectionChange">
      <slot name="before"></slot>
      <el-table-column
        v-if="isShowOrder"
        type="index"
        align="center"
        :width="60"
        label="序号"
        prop="index"
        :index="
          index => {
            return index + (currentPage - 1) * pageSize + 1
          }
        "
      ></el-table-column>
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        :type="item.type"
        :align="item.align || 'center'"
        :render-header="item.renderHeader"
        :width="item.width"
        :index="item.index"
        :prop="item.prop"
        :label="item.label"
        :formatter="item.formatter"
        :show-overflow-tooltip="item.isShowTip"
      >
        <template slot-scope="scope">
          <expand v-if="item.render" :render="item.render" :index="scope.$index" :row="scope.row" :column="scope.column"></expand>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
      <slot></slot>
    </el-table>
    <div class="pagination" v-if="isShowPage && total">
      <el-pagination
        background
        @size-change="sizeChange"
        @current-change="currentChange"
        :page-size="pageSize"
        :current-page="currentPage"
        :page-sizes="[defaultSize, 50, 100, 200]"
        layout="total, sizes, prev, pager, next, jumper"
        :total.sync="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import expand from './expand.js'
import config from '@/config'

export default {
  name: 'v-table',
  components: {
    expand
  },
  props: {
    isShowOrder: {
      type: Boolean,
      default: true
    },
    isShowPage: {
      type: Boolean,
      default: true
    },
    total: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: config.pageSize
    },
    currentPage: {
      type: Number,
      default: 1
    },
    handleSizeChange: {
      type: Function
    },
    handleCurrentChange: {
      type: Function
    },
    data: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    },
    height: {
      type: Number
    }
  },
  data() {
    return {
      defaultSize: config.pageSize,
      selection: []
    }
  },
  created() {
    this.defaultSize = this.pageSize
  },
  methods: {
    sizeChange(pageSize) {
      this.handleSizeChange(pageSize)
    },
    currentChange(page) {
      this.handleCurrentChange(page)
    },
    selectionChange(val) {
      this.selection = val
      this.$emit('selectionChange', val)
    }
  }
}
</script>
